<template>
	<view class="page-body ">
		<!-- 提现 -->
		<view class="bank-cont paround40">
			<view class="text">当前账户余额：{{balance}}元</view>
			<view class="login-ipt-wrap flex ">
				<text>¥</text>
				<input type="number" placeholder="请输入提现金额" @input="bindChange"  v-model="sum" placeholder-style="color:#c7c7c7" maxlength="11"  />
			</view>
		</view>
		<!-- 选择购买渠道 -->
		<view class="paymethod bank-cont paround40" >
			<view class="text">选择提现银行卡</view>
			<view class="flex label" @click="goBindAccount2"  >
				<view class="cont">
					<view class="cont-t">
						<text class="t">提现至我的银行卡</text>
					</view>
					<text v-if="!hasnoCard">{{WDCard.linked_name}} {{WDCard.cardno_g}}</text>
					<text v-else>您还未绑定银行卡，点击前去绑定</text>
				</view>
				<view class="icon xiangyou" style="font-size:28upx"></view>
			</view>
		</view>
		<view class="paround40">
			<view :class="['button',isNextStep?'primary':'disabled']" :disabled="!isNextStep" @click="nextStep">确认提现</view>
		</view>
		<!-- 兑换说明 -->
		<view :class="['state flex',isPopout?'fadein':'']" >
		    <view class="mask" @click="close"></view>
		  <!--  <view class="body">
		        <view class="cont">
					<view class="h3">兑换说明</view>
					<view class="p">1、</view>
					<view class="btn" @click="close">知道了</view>
				</view>
		    </view> -->
		</view>
		
		<pop-down  ref="popdown" :showConfirm="false">
			<block slot="content">
				<view class="title flex"><text>选择转账银行卡</text><text @click="goBindCard">去绑定新银行卡></text></view>
				<scroll-view class="content" style="height:400upx;" scroll-y>
					<view class="radio" v-for="(item,index) in myCardList" :key="index" @click="selectbank(item.id)">
						<view class="flex bankcard">
							<view class="key">{{item.linked_name}} </view>
							<view class="value">{{item.linked_acctno}}</view>
							<view class="icon xiangyou radio" style="font-size:28upx"></view>
						</view>
					</view>
				</scroll-view>
			</block>
		</pop-down>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex';
	var that;
	var prevent=false;//防止重复点击
	import {showModal} from '@/utils/utils.js';
	import {Decimal} from 'decimal.js';
	import popDown from '@/components/pop-down.vue';
	export default{
		data(){
			return{
				sum:"",
				isNextStep:false,
				balance:"0",
				isPopout:false,
				isOpen:true,
				hasnoCard:true,
				myCardList:[],
				selectbankId:"",
				currentidx:0,
				WDCard:""
			}
		},
		computed:mapState({
			
		}),
		methods:{
			selectbank(id){
				this.selectbankId = id;
				let bankcard = this.myCardList.find(function(item,index){
					return item.id == id;
				})
				that.WDCard = bankcard;
				this.$refs.popdown.close()
			},
			goBindAccount2(){
				if(this.hasnoCard){
					uni.navigateTo({
						url:"/pages/user/setting/certification"
					})
					return false;
				}
				this.$refs.popdown.show()
			},
			nextStep(e){
				this.isfail=false;
				let balance=parseFloat(this.balance);
				let sum = parseFloat(this.sum);
				if(sum==""||!sum){
					this.$showToast('请输入提现金额');
					return ;
				}
				if(sum>balance){
					this.$showToast('超出可提现金额');
					return;
				}
				if(this.hasnoCard){
					var msg="您还未绑定银行卡，是否前往绑定"
					showModal({
						content:msg,
						confirmText:"确定",
						showCancel:true,
						success:(res)=>{
							if(res.confirm){
								uni.navigateTo({
									url:"/pages/user/setting/certification"
								})
							}
						}
					})
					return false;
				}
				if(this.isNextStep){
					this.submit()
				}
			},
			/* 线下 */
			submit(){
				if(prevent)return;
				prevent = true;
				uni.showLoading({
					title:"兑换处理中",
					mask:true
				})
				let sum = this.sum;
				let cid = "";
				if(!this.hasnoCard){
					cid = this.WDCard.id;	
				}
				that.$https.POST({
					url:'/user/commissionWithdraw',
					data:{
						money:sum, card_id:cid
					},
					success(res){
						uni.hideLoading()
						uni.navigateTo({
							url:`/pages/user/deposit/withdrawsuccess`
						})
						prevent = false;
					},
					failcb(){
						uni.hideLoading()
						prevent = false;
					}
				})
			},
			bindChange(e){
				let value=e.detail.value;
				
				this.checkCanNext(value)
			},
			checkCanNext(sum){
				let balance=parseFloat(this.balance);
				if(sum==""||parseFloat(sum)>balance||this.hasnoCard){
					this.isNextStep = false
				}else{
					this.isNextStep = true
				}
			},
			getCard(){
				this.$https.POST({
					url:'/pay/lianlianBindcard',
					data:{
						addType:1
					},
					passurl:true,
					success(res){
						if(res.data.length==0){
							that.hasnoCard = true
						}else{
							that.hasnoCard = false
						}
						res.data.forEach((item)=>{
							item.cardno_g = item.linked_acctno.replace(/(\d{4})(\d+)(\d{4})/, "$1****$3");
						})
						that.WDCard = res.data[0];
						that.myCardList = res.data;
					}
				})
			},
			close(){
				this.isPopout=false
			},
			close3(){
				this.specClass = "hide";
				setTimeout(() => {
					this.specClass = 'none';
				}, 200);
			},
			goBindCard(){
				uni.navigateTo({
					url:"/pages/user/setting/certification"
				})
				this.$refs.popdown.close()
			}
		},
		onLoad(options){
			that=this;
			// #ifdef APP-PLUS
			plus.nativeUI.showWaiting('加载中……',{
				background:"#fff",color:"#111a34",size:"16",
				loading:{
					display:'block',
					height:"35",
					icon:"/static/img/icon/i-loading-gif.png",
					interval:100
				}
			});
			// #endif
			if(options.balance){
				this.balance = options.balance;
			}
		},
		onShow(options){
			this.getCard();
		},
		onReady() {
			// #ifdef APP-PLUS
			plus.nativeUI.closeWaiting();
			// #endif
		},
		onNavigationBarButtonTap(e){
			this.isPopout=true
		},
		onUnload(){
		},
		components:{
			popDown
		}
	}
	function decimal_operation(a,b,operation){
        if(operation=="+"){
            return Decimal(a).add(b).toNumber();
        }
        if(operation=="-"){
            return Decimal(a).sub(b).toNumber();
        }
        if(operation=="*"){
            return Decimal(a).mul(b).toNumber();
        }
        if(operation=="/"){
            return Decimal(a).div(b).toNumber();
        }
    }
    function number_decimal(num, m = 2) {
       let temp = parseInt(Decimal(num).mul(Math.pow(10, m)).toNumber());
       temp = Decimal(temp).div(Math.pow(10, m)).toNumber()
       return temp;
    }
</script>

<style lang="scss" scoped="">
	@import '../../../static/css/user.css';
	.page-body{background: #f7f6f8;}
	.floor1{
		justify-content: space-between; height: 130upx; margin-bottom: 20upx; background: #fff; color: #0e1327;
		.bankcard{
			image{width:50upx;height:50upx ;margin-right: 15upx;}
		}
	}
	.p{color: #c3c5d1;font-size: 24upx;padding:0;line-height: inherit;}

	.bank-cont{
		background: #fff; margin-bottom: 20upx;
		.text{height: 88upx;line-height: 88upx;color: #535970;}
		.login-ipt-wrap{border-bottom-color:$cut-line-color ;}
		.login-ipt-wrap text{color:#0e1327;font-size: 42upx;}
		.p{height: 80upx;line-height: 80upx;}
	}
	.button{border-radius: 44upx;margin-top: 80upx;}
	.state{
		position: fixed; z-index: -1; opacity: 0; transition: all .2s linear;
		left: 0; right: 0; top: 0; bottom: 0;
		align-items: center; justify-content: center;
		.body{position: relative;
			z-index: 10;}
		.cont{
			width:560upx;
			min-height: 200upx;
			background: #fff;
			border-radius: 10upx;
			padding:0 20upx 30upx;
		}
		.h3{line-height: 90upx;color: #0e1327;font-size: 34upx;text-align: center;font-weight: bold;}
		.p{font-size: 26upx;color: #535970;line-height: 40upx;padding-top: 10upx;}
		.btn{width: 320upx;height: 60upx;border-radius: 30upx;line-height: 60upx;background:linear-gradient( 0deg, rgb(255,114,1) 0%, rgb(255,129,27) 100%);color: #fff;text-align: center;margin: 0 auto;margin-top:30upx; font-size: 28upx;}
	}
	.state.fadein{
		opacity: 1;z-index: 10;
	}
	.update{
		.img{width: 82upx;height: 82upx;padding: 60upx 0 30upx;display: block;margin: 0 auto;}
		.p{text-align: center; padding: 0 40upx;font-size: 28upx;line-height: 50upx;color: #535970;}
		.btn{overflow: hidden;border-radius: 40upx;height: 80upx;background: linear-gradient(0deg, #ff7201 0%, #ff811b 100%);position: relative;width: 70%;line-height: 80upx;color: #fff;margin-top: 50upx;}
		.i-close{
			position: absolute;
			right: 0;
			top: 0;
			z-index: 1;
			width: 90upx;
			height: 90upx;
			text-align: center;
			line-height: 90upx;
		}
	}
	.txt{
		line-height: 40upx;text-align: center;margin-top: 30upx;
	}
	.txt text{color: #ff7201;}
	.mt20{margin-top: 20upx;}
	.pb20{padding-bottom: 20upx;}
	.line-w{
		line-height: 60upx;    color: #535970;
		text:nth-of-type(1){width: 250upx;}
		text:nth-of-type(2){color: #0e1327;}
	}
	.paymethod{
		.label{
			min-height: 60upx;border-bottom: 1px solid #efefef; padding: 22upx 0;
			.cont{
				flex:1;
				.cont-t{
					display: flex;justify-content: space-between;align-items: center;
					text{color: #999;}
					.t{font-size: 32upx;color: #111A34;line-height: 56upx;}
					// .recommend{color: #ff6361;}
				}
			}
			.strong{color: #dca14d;}
			text{
				font-size: 26upx; color:#a0a0a0;
			}
		}
		.label:nth-last-of-type(1){border-bottom: none;}
	}
	
	.title{
		line-height: 48upx;height:48upx;text-align: center;font-size: 30upx;text-align: center;width: 750upx;justify-content: space-between;padding: 20upx;
		text:nth-of-type(1){padding-left:10upx ;}
		text:nth-of-type(2){
			font-size: 26upx;color: #007AFF;
		}
	}	
	.content {
		width: 750upx;
		padding: 0upx 4% 20upx;
		box-sizing: border-box;
	}
	.bankcard{line-height: 80upx;height: 80upx; font-size:28upx;position:relative; border-bottom:1px solid #f3f3f3;
		.key{width: 200upx;font-size:28upx;}
		.value{padding-left:10upx ;font-size:26upx;}
		.radio{position: absolute;right: 0;top: 0;line-height: 80upx;}
	}
			
</style>
